<template>
  <div>
    <el-card style="margin-bottom: 50px">
      <el-form :model="formData" label-width="100px" :inline="true">
        <el-form-item label="图标名称">
          <el-input v-model="formData.iconName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button @click="handleAdd">
        <IconifyIconOffline :icon="Plus" />
        新增
      </el-button>
      <el-button @click="handleEdit">
        <IconifyIconOffline :icon="EditPen" />
        修改
      </el-button>
      <el-button @click="handleDelete">
        <IconifyIconOffline :icon="Delete" />
        删除
      </el-button>
      <pure-table
        :data="tableData"
        :columns="columns"
        @selection-change="handleSelectionChange"
        row-key="id"
        stripe
        :header-cell-style="{
          background: '#eff2fb',
          color: 'var(--el-text-color-primary)'
        }"
        style="margin-top: 30px"
      >
        <template #icon="{ row }">
          <el-icon>
            <component :is="row.icon" />
          </el-icon>
        </template>
        <template #operation="{ row }">
          <el-button link type="primary"> 修改 </el-button>
          <el-button link type="primary">删除</el-button>
        </template>
      </pure-table>
      <el-pagination
        class="pagination"
        :current-page="listPageObj.currentPage"
        :page-size="listPageObj.pageSize"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listPageObj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <AddIcon :title="title" ref="addIcon" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import Plus from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import { ElMessage, ElMessageBox } from "element-plus";
import AddIcon from "./dialog/addIcon.vue";

interface Table {
  id: string;
  iconName: string;
  icon: string;
  createTime: string;
}

const formData = reactive({
  iconName: ""
});
const multipleSelection = ref([]);
const title = ref("新增常用语");
const addIcon = ref(null); //定义子组件
const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

const tableData: Table[] = [
  {
    id: "1",
    iconName: "阿海",
    icon: "Edit",
    createTime: "2000"
  }
];
const columns: TableColumnList = [
  {
    type: "selection",
    align: "left"
  },
  {
    label: "图标名称",
    prop: "iconName"
  },
  {
    label: "图标",
    prop: "icon",
    slot: "icon"
  },
  {
    label: "创建时间",
    prop: "createTime"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];

const handleSelectionChange = val => {
  multipleSelection.value = val;
};
function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}

function handleAdd() {
  title.value = "新增图标";
  addIcon.value.dialogVisible = true;
}
function handleEdit() {
  title.value = "编辑图标";
  addIcon.value.dialogVisible = true;
}

const handleDelete = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      message: "请选择数据",
      type: "warning"
    });
  } else if (multipleSelection.value.length > 1) {
    ElMessage({
      message: "暂不支持多选",
      type: "warning"
    });
  } else {
    ElMessageBox.confirm("确定要删除图标嘛", "Warning", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除"
        });
      });
  }
};
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}
</style>
